<template>
    <div class="main config-spec-list">
        <section>
            <div v-if="rightsButtons['add']" class="btn-block">
                <el-button type="success" size="small" icon="el-icon-circle-plus" @click="addColor" plain>新建规格</el-button>
                <el-button type="export" size="small" icon="el-icon-circle-plus" @click="exportColorE3" plain>导出规格</el-button>
                <el-upload ref="importRef" accept=".xls,.xlsx" :show-file-list="false" style="display:inline-block;margin:0px 10px 0 10px" :action="''" :limit="1" :http-request="importExcel">
                    <el-button size="small" plain type="success">导入更新状态</el-button>
                </el-upload>
            </div>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="82px">
                <input type="text" style="display: none"/>
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                      <el-form-item label="规格名称：" prop="spec_name">
                        <el-input @keyup.enter.native="search" v-model="listQuery.spec_name" placeholder="规格名称" maxlength="50" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                      <el-form-item label="规格编码：" prop="spec_code">
                        <el-input @keyup.enter.native="search" v-model="listQuery.spec_code" placeholder="规格编码" maxlength="50" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="是否导入E3：" prop="export_e3" label-width="100px">
                            <el-select v-model="listQuery.export_e3" :clearable="true">
                                <el-option label="是" value="1"></el-option>
                                <el-option label="否" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <el-table @selection-change="selectionChange" :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column align="center" label="规格编码" prop="specCode"></el-table-column>
                <el-table-column align="center" label="规格名称" prop="specName"></el-table-column>
                <el-table-column align="center" label="是否已导入E3" prop="isExport">
                    <template slot-scope="scope">
                        <span>{{scope.row.isExport?'是':'否'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="创建时间">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="220" >
                    <template slot-scope="scope">
                        <el-button v-if="rightsButtons['edit']" type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
                        <el-button v-if="rightsButtons['delete']" type="primary" size="mini" @click="deleteSpec(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.page_size"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>

<script>
  import { getSpecList, getShopList, addBrandAuth, cancelBrandAuth, getConfigSpec, addColorSpec, editColorSpec, deleteColorSpec, exportE3Spec, importSpecStatus } from '@/api/merchantsys/config'
    export default {
        name: 'specConfigList',
        data() {
            return {
                ids: [],
                shopOptions:[],
                list: [],
                listQuery: {
                    export_e3: null,
                    attr_group_id:'',
                    attr_id:'',
                    spec_code: '',
				    spec_name: '',
                    page: 1,
                    page_size: 10
                },
                pList: [],
                listTotal: 0,
                listLoading: false,
                loading:false,
                editItem:{
                    brandName:'',
                    brandId:'',
                    shopId:'',
                    brandType:''
                },
                editRule: {
                    brandName: [
                        {required: true, message: '不能为空', trigger: 'blur'}
                    ],
                    shopId:[
                        {required: true, message:'请选择', trigger: 'change'}
                    ],
                    brandType:[
                        {required: true, message:'请选择', trigger: 'change'}
                    ]
                }
            }
        },
        created() {
            this.loadConfigSpec()
            console.log(this.$route.params)
        },
        methods: {
            //导入更新状态
            importExcel(params) {
                let fd = new FormData()
                fd.append('file', params.file)
                this.$refs.importRef.clearFiles()
                importSpecStatus(fd).then(res=>{
                    this.getList()
                }).catch(err=>{
                    this.getList()
                })
            },
            //选择要导出的具体数据
            selectionChange(item) {
                this.ids = []
                item.map(k => {
                    this.ids.push(k.id)
                })
            },
            //导出E3格式颜色
            exportColorE3() {
                exportE3Spec({ attrId: this.listQuery.attr_id, ids: this.ids }).then(res=>{
                    this.downloadFile(res, 'E3格式规格.xlsx')
                })
            },
            edit(row){
                this.$prompt('请输入规格', '编辑规格', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue:row.specName,
                    inputPattern: /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9]){1,8}$/,
                    inputErrorMessage: '数字,英文,汉字限制8个字符'
                }).then(({ value }) => {
                    editColorSpec({id:row.id, spec_name:value}).then(res=>{
                        console.log(res)
                        this.$message.success("保存成功")
                        this.getList()
                    }).catch(err => {
                        this.$message.success(err.message)
                    });
                })
            },
            deleteSpec(id){
                this.$confirm(`确定删除?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    deleteColorSpec({id:id}).then(res=>{
                         this.$message.success('删除成功')
                         this.getList()
                    })
                })
            },
            addColor(){
                this.$prompt('请输入规格', '新建规格', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9]){1,8}$/,
                    inputErrorMessage: '数字,英文,汉字限制8个字符'
                }).then(({ value }) => {
                    addColorSpec({attr_group_id:this.listQuery.attr_group_id, attr_id:this.listQuery.attr_id, spec_name:value}).then(res=>{
                        console.log(res)
                        this.$message.success("保存成功")
                        this.getList()
                    }).catch(err => {
                        this.$message.success(err.message)
                    });
                })
            },
            loadConfigSpec(){
                getConfigSpec().then(res=>{
                    this.listQuery.attr_group_id = res.data.spec.attrGroupId
                    this.listQuery.attr_id = res.data.spec.attrId
                    this.getList()
                })
            },
            getList(){
                this.listLoading = true;
                getSpecList(
                    {
                        export_e3: this.listQuery.export_e3,
                        attr_group_id: this.listQuery.attr_group_id,
                        attr_id: this.listQuery.attr_id,
                        spec_code: this.listQuery.spec_code,
                        spec_name: this.listQuery.spec_name,
                        page: this.listQuery.page,
                        page_size: this.listQuery.page_size
                    }
                ).then(res => {
                    this.list = res.data.data;
                    this.listTotal = res.data.total;
                    this.listLoading = false;
                }).catch(err => {
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                })
            },
            // 清空搜索条件
            resetForm (formName) {
                this.$nextTick(() => {
                    this.$refs[formName].resetFields()
                })
            },
            // 搜索
            search() {
                this.listQuery.page = 1;
                this.getList();
            },
            //切换每页条数
            handleSizeChange (value) {
                this.listQuery.page_size = value;
                this.getList()
            },
            // 切换分页
            handleCurrentChange(page) {
                this.listQuery.page = page;
                this.getList();
            },
        }
    }
</script>

<style lang="scss">
    .ad-manage-list>section{
        padding: 24px;
        background: #fff;
    }
</style>
